<template>
  <div class="job_title">
    热招职位
  </div>
  <el-row justify="start" class="all-job">
    <div class="job_card" v-for="(item, index) in jobData" :key="index">
      <router-link class="job_info" :to="{ path: '/postionInfoPage', query: { jobId: item.jobId } }">
        <div class="job_top">
          <p class="job_name">{{ item.jobName }}</p>
          <p class="salary">{{ item.jobSalary }}</p>
        </div>
        <p class="job_text">
          <span class="job_time">{{ item.jobEx }}</span>
          <span class="job_edu">{{ item.jobEdu }}</span>
          <span class="job_edu">{{ item.jobAge }}</span>
        </p>
      </router-link>
      <router-link class="job_com" :to="{ path: '/eInfoPage', query: { eId: item.eId } }">
        <p class="com_text">
          <img :src="item.eAvatar" alt="">
          <span class="com_name">
            {{ item.eName }}
          </span>
        </p>
        <span class="com_place">
          {{ item.contactAddress }}
        </span>
      </router-link>

    </div>
  </el-row>


</template>
<script lang="ts">
import { reactive, toRefs, onMounted, watch, onBeforeMount } from "vue"
import { useStore } from "vuex"
import { elmessage, data } from "@/hook/hook"
import { getAllJobInfo } from "@/api/authApi"
import { getEAvatar } from "@/api/enterpriseApi"
import jobState from "@/store/state/jobState"

export default {
  name: "HotJob",

  setup() {
    const store = useStore()
    // const avatar = require('/src/assets/img/WebApps.jpg')
    interface jobs {
      eId: string,
      eAvatar: string,
      jobId: string,
      jobAge:string,
      jobName: string,
      jobEdu: string,
      jobEx: string,
      jobSalary: string,
      eName: string,
      contactAddress: string,
    }
    const jobData: jobs[] = reactive([])
    

  

    // 从后端获取所有岗位和企业相关信息
    const init = async () => {
      const jobs = await getAllJobInfo();
      // console.log(jobs.data);
      jobs.data.datas.forEach(async (value: any, index: any, self: any) => {
        const data = {
          eId: value.eId
        }
        getEAvatar(data).then((re: any) => {
          if (re.data.type == "image.jpeg/png") {
            jobData.push(
              {
                ...value,
                eAvatar: window.URL.createObjectURL(re.data)

              }
            )
          } else {
            console.log(re.data);

          }

        })

      })
    
    }

    onMounted(() => {
      init()
    })
    
    return {
      jobData
    }
  },

}
</script>
<style scoped>
.job_title {
  border-bottom: 2px solid rgb(210, 202, 202);
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  font-weight: bold;
  font-family: '微软雅黑';

}



.job_card {
  margin-right: 6.5px;
  margin-top: 20px;
  /* margin-left: 25px;
  margin-right: 24px; */
  background-color: #FFFF;
  height: 136px;
  width: 380px;

}

.job_card:hover {
  transition: border linear .2s;
  box-shadow: 0 0 18px rgba(213, 208, 213, 3);
}

a {
  text-decoration: none;
  /* 将a里面的元素写进他的范围内 a为行元素*/
  display: inline-block
}

.job_info {
  /* 流式布局，会把borders和padding全都包含在定义的宽高，这样内容不会超出范围 */
  box-sizing: border-box;
  width: 100%;
  padding: 16px 20px;
}

.job_top {
  margin-bottom: 6px;
  height: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.salary {
  color: rgb(208, 9, 9);
}

.job_text {
  height: 22px;
  margin-top: 10px;
  display: flex;
  align-items: center;

}

p {
  color: black;
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-family: '微软雅黑';
}

span {
  font-size: 12px;
  font-weight: 500;
  color: rgb(104, 104, 104);
  background-color: rgb(246, 246, 246);
  padding: 1px 0px 2px 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 10px;
  font-family: '微软雅黑';
  /* margin: 0 0 4px 0; */
}

.job_time {
  margin-right: 2px;
}

.job_edu {
  margin-left: 2px;
}

.job_com {
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  padding: 13px 18px;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(246, 246, 246);
}

img {
  border-radius: 5px;
  height: 24px;
  width: 24px;
}

.com_text {
  display: flex;
  align-items: center;
}

.com_name {
  font-size: 16px;
}

.com_place {
  font-size: 14px;
}
</style>
